<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="light" class="pub-hearder">
        <ion-buttons slot="start">
          <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-title>
          我的课程
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="grad">
          <ion-list  lines="none"> 
              <ion-item v-for="(item, index) in fileList" :key="index" @click="goDownPage($event, item)">
                  <ion-avatar slot="start" class="avatar">
                      <img class="avatar" src="@/assets/images/filedown.png">
                  </ion-avatar>
                  <ion-label>
                      <p class="filename">{{ item.title }}</p>
                      <span>张老师 I 第九讲</span>
                  </ion-label>
              </ion-item>
          </ion-list>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle , IonPage, IonContent, IonList, IonItem, IonLabel, IonAvatar } from '@ionic/vue';
import { reactive, toRefs, onMounted } from 'vue';
import { chevronForwardOutline } from 'ionicons/icons';
import { NativeService } from '@/utils/native-service';
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle, IonList, IonItem,  IonLabel,  IonAvatar
  },
  setup() {
    const nativeService = new NativeService();
    const state = reactive({
      fileList: [
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 1
            },
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 0
            },
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 1
            }
        ],
    })

    onMounted(() => {
      nativeService.startLoc().then((res: any) => {
        console.log(res);
      });
    });

    // startLoc

    function selectImg(){
      nativeService.addImgFile((res: any) => {
        console.log(res);
      })
    }
    return {
      ...toRefs(state),
      chevronForwardOutline,
      selectImg
    }
  }
}
</script>
<style lang="scss" scoped>
.grad{
    background: #fff;
    ion-icon{
        position: relative;
        top: 2px;
        
    }
    ion-item{
        margin-bottom: 20px;
    }
    .desc{
        font-size: 13px;
        color: #5E6266;
        overflow: hidden;  //超出隐藏
        text-overflow: ellipsis; //文本超出时显示省略号
        white-space: nowrap; //设置文本不换行
    }
    .filename{
        font-weight: bold;
        font-size: 16px;
        color: #1E1E1F;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    span{
        font-size: 12px;
        color: #939699;
    }
    label{
        font-size: 12px;
        color: #fff;
        background: #CA3032;
        padding: 3px 5px;
        margin-right: 5px;
        border-radius: 3px;
    }
}
</style>